import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    FlatList,
    TouchableWithoutFeedback,
} from 'react-native'
import {setSpText,setHW} from './ScreenUtil'
const Dimensions = require('Dimensions');
const {width,height } = Dimensions.get('window');
const cellWidth = ((width - setHW(60))/2 - setHW(10));
export default class Lessons extends Component {
    constructor(props){
        super(props);
        this.state = {}
    }
    render() {
        return (
            <View style={[styles.commandLessons]}>
                <FlatList
                    data={this.props.LessonsList}
                    showsVerticalScrollIndicator={false}
                    initialNumToRender={10}
                    renderItem={({item,index}) => this.renderItem(item,index)}
                    contentContainerStyle={{flexDirection:'row',flexWrap:'wrap', justifyContent:'flex-start'}}
                    extraData={this.state}
                    keyExtractor={(item,index) => index}
                />
            </View>
        )
    }
    _renderFooter() {
        return (
            <View style={styles.commonFooter}>
                {this.props.LessonsList ? <Text style={styles.commonFooterText}>已经到底部了...</Text>: null}
            </View>
        )
    }
    // 跳转到 课程目录页面
    gotoLessons(item) {
        this.props.navigation.navigate('DetailLesson', {courseId:item.ID});
    }
    renderItem(item,index) {
        return (
            <TouchableWithoutFeedback key={item.ID} onPress={() => this.gotoLessons(item)}>
                <View>
                    <View style={[index%2==0?styles.listItemMarginRight:styles.listItem]}>
                        <View style={{width: cellWidth, height:  setHW(220)}}>
                            <Image style={{width: cellWidth, height: setHW(220),resizeMode: 'cover'}} source={{uri:item.PIC}} />
                        </View>
                        <View style={styles.tags}>
                            <View style={styles.radius}>
                                <Text style={styles.tag}>{this.props.subject ? this.props.subject : item.SUBJECTNAME }</Text>
                            </View>
                            <View style={styles.radius}>
                                <Text style={styles.tag}>{this.props.grade ? this.props.grade : item.PERIODNAME }</Text>
                            </View>
                        </View>
                        <View>
                            <Text style={styles.titleText}>
                                {this.MoreText(item.COURSE_NAME,10)}
                            </Text>
                        </View>
                        <View style={styles.lessonsInfos}>
                            <View style={styles.iconBox}>
                                <Image style={styles.lessonsIcon} source={require('../assets/imgs/smallIcon.png')} />
                                <Text style={styles.lessonsTeacher}>
                                    <Text style={styles.lessonsTeacher}>
                                        {this.MoreText(item.USERNAME,4)}
                                    </Text>
                                </Text>
                            </View>
                            {this.FreeOrCharge(item)}
                        </View>
                    </View>
                </View>
           </TouchableWithoutFeedback>
        )
    }
    //内容超出
    MoreText(text,MaxNum){
        if(text){
            if(text.length>MaxNum){
                return(
                    text.substring(0,MaxNum)+'...'
                )
            }else{
                return(
                    text
                )
            }
        }
    }
    // 这里只分是否免费 不分是否购买过
    FreeOrCharge(item) {
        if(item.IS_FREE=='0'){//收费
            return (
                <View>
                    <View style={styles.lessonsPrice}>
                        <Text style={styles.pricePrefix}>¥</Text>
                        <Text style={styles.price}>{item.MONEY}</Text>
                    </View>
                </View>
            )
        }else{
            return (
                <View>
                    <View style={styles.lessonsPrice}>
                        <Text style={styles.priceText}>免费</Text>
                    </View>
                </View>
            )
        }
    }
}
const styles = StyleSheet.create({
    commandLessons: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    commonFooter: {
        backgroundColor: 'red',
        flexDirection: 'row',
        height: setHW(60),
        justifyContent: 'center',
        alignItems: 'center',
    },
    commonFooterText: {
        height: setHW(60)
    },
    listItem: {
        width: cellWidth,
        marginRight: 0,
        marginBottom: setHW(15),
        marginTop: setHW(15),
    },
    listItemMarginRight:{
        width: cellWidth,
        marginRight: setHW(20),
        marginBottom: setHW(15),
        marginTop: setHW(15),
    },
    tags: {
        flexDirection: 'row',
        position:'absolute',
        left: 0,
        top: setHW(164)
    },
    radius:{
        height:setHW(36),
        justifyContent:'center',
        alignItems:'center',
        borderRadius: setHW(8),
        backgroundColor: 'rgba(99,99,100,.8)',
        marginLeft: setHW(14),
        paddingLeft: setHW(16),
        paddingRight: setHW(16),
    },
    tag: {
        color: '#fff',
        fontSize:setSpText(20),
    },
    titleText: {
        height:setHW(40),
        marginTop: setHW(10),
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        color: '#333',
        fontSize:setSpText(28),
    },
    lessonsInfos: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height:setHW(40),
    },
    iconBox:{
        flexDirection: 'row',
        height:setHW(40),
        justifyContent:'center',
        alignItems:'center',
    },
    // 教师小头像
    lessonsIcon: {
        width:setHW(22),
        height:setHW(25),
        marginRight:setHW(4),
        resizeMode: 'cover',
    },
    // 教师姓名
    lessonsTeacher: {
        color: '#666666',
        fontSize:setSpText(24)
    },
    lessonsPrice: {
        height:setHW(40),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems:'center',
    },
    pricePrefix: {
        paddingTop:setHW(4),
        fontSize:setSpText(24),
        color: '#FF8A00'
    },
    price: {
        fontSize:setSpText(28),
        color: '#FF8A00',
        fontWeight: 'bold'
    },
    priceText:{
        fontSize:setSpText(28),
        color: '#FF8A00',
        fontWeight: 'bold',
    }
})